<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<test-com></test-com>	
	</div>

</body>
<script type="text/javascript">
	// 定义一个混入对象
	var myMixin = {
	  created: function () {
	  	console.log(1);
	    this.hello();// 选项合并的用法，此处调用的 hello 注意 2个方法,
	    this.test();
	  },
	  methods: {
	    hello: function () {
	      console.log('hello from mixin!')
	    },
	    test:function(){
	    	console.log('test from mixin!')
	    }
	  }
	}
	// 定义一个使用混入对象的组件
	Vue.component('test-com',{
	  // mixins: [myMixin],
	  template:'<h1>Test</h1>'
	})

	var app= new Vue({
	 	el: '#app',
        methods: {
            hello(){
                console.log('组件：hello')
            }
        },
        created: function () { 
        	console.log("---------2---------");
        },
        mixins: [myMixin],
        mounted: function(){
            this.hello();
        }
    });
</script>
</html>